<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: head">
</head>

<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.min.css">
<script src="//cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/mode/clike/clike.min.js"></script>
<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/theme/eclipse.min.css">

<body data-spy="scroll" data-target="#myScrollspy">
<style type="text/css">
    @media only screen and (max-width: 768px) {
        .blog {
            width:100%;
        }
        .blogIndex{
            display:none;
        }

    }

    ul.nav-tabs {
        width: 200px;
    }

    img {
        width: 100%;
    }

    table {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
    table th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }
    table td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }

    h3{
        font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
        clear: both;
        background-color: #FBF9F9;
        margin-bottom: 8px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 20px;
        border-left: 3px solid #639b30;
        padding-left: 20px;
        font-size: 20px;
        border-radius: 0px;
    }

    p{
        font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;
        background-color: rgb(255, 255, 255);
        font-size: 15px;
        text-align: justify;
        white-space: pre-line;
        /*line-height: 1.25em;*/
        padding-top: 10px;
        padding-right: 8px;
        padding-left: 8px;
        /*color: rgb(74, 74, 74);*/
    }
    b, strong {
        font-size: 16px;
    }
    code {
        display: none;
    }
    .CodeMirror {
        border: 1px solid #eee;
        height: auto;
    }
    .CodeMirror-scroll {
        height: auto;
        overflow-y: hidden;
        overflow-x: auto;
    }


</style>

<div class="container">
    <div th:replace="common :: navbar"></div>
    <div class="row">
        <div class="col-xs-9 blog" >
            <div th:each="item,itemStat : ${projectItemDtoList}">
                <h1 th:id="'section-' + ${item.id}" th:text="${item.title}" style="padding:5px;background: #eee;"></h1>
                <div th:utext="${item.content}"/>
                <hr>
            </div>
            <div id="SOHUCS" ></div>
        </div>
        <div class="col-xs-3 blogIndex" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" >
                <li th:each="item,itemStat : ${projectItemDtoList}"><a th:href="'#section-' + ${item.id}" th:text="${item.title}"></a></li>
                <li><a href="javascript:refreshPage();"><i id="refreshPageNode" class="fa fa-refresh fa-2x"></i></a> </li>
            </ul>

        </div>
    </div>
    <div id="disqus_thread" class="row col-xs-9 blog"></div>


</div>
<script src="/js/slideToTop.js"></script>
<script>
    function refreshPage(){
        $("#refreshPageNode").toggleClass("fa-spin");
        $.ajax({
            type: "get",
            dataType: "html",
            url: '/pull',
            data: null,
            success: function (data) {

                $("#refreshPageNode").toggleClass("fa-spin")
                window.location.href = location.href;
            }
        });
    }

</script>
<!--<script>-->

    <!--/**-->
     <!--*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.-->
     <!--*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/-->

    <!--var disqus_config = function () {-->
    <!--this.page.url = window.location.href;  // Replace PAGE_URL with your page's canonical URL variable-->
    <!--this.page.identifier = window.location.href; // Replace PAGE_IDENTIFIER with your page's unique identifier variable-->
    <!--};-->

    <!--(function() { // DON'T EDIT BELOW THIS LINE-->
        <!--var d = document, s = d.createElement('script');-->
        <!--s.src = 'https://http-install-ren.disqus.com/embed.js';-->
        <!--s.setAttribute('data-timestamp', +new Date());-->
        <!--(d.head || d.body).appendChild(s);-->
    <!--})();-->
<!--</script>-->
<!--<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>-->
<!--PC版-->


<script type="text/javascript">

    var eles = document.getElementsByTagName("code");
    for (var i = 0; i < eles.length; i++) {
        var c = eles[i];
        var code = c.innerText;
        CodeMirror(c.parentElement,{
            //显示行号
            lineNumbers:true,

            readOnly: true,

            //设置主题
            theme:"eclipse",

            mode: "text/x-java",

            value: code

        });
    }

    setTimeout(function () {
        var eles = document.getElementsByTagName("code");
        for (var i = 0; i < eles.length; i++) {
            var c = eles[i];
            c.remove();
        }
    }, 3000);

</script>
<div th:replace="common :: copyright"></div>

</body>

<script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
    window.changyan.api.config({
        appid: 'cyuEd9kiC',
        conf: 'prod_076135539d6da02a172c83afbf433dfb'
    });
</script>
</html>
